require.config({
    paths: {
        vue: "../encaptool/encvue",
        iview: "../utiltool/iview/iview",
        jquery: "../utiltool/jquery/jquery.min",
        router: "../encaptool/encarouter",
        axios: "../encaptool/encaxios",
        echarts: "../utiltool/echarts/echarts.min"
    },
    shim: {
        iview: ["vue"]
    }
});
require(["vue", "iview", "echarts", "jquery", "router", "axios"], function(
    Vue,
    iview,
    echarts,
    $,
    Router,
    axios
) {
    Vue.use(iview);
    Vue.use(echarts);
    new Vue({
        el: "#chartmanage",
        data() {
            return {
                sumVolume: [],
                total: [],
                xdata: [],
                ydata1: [],
                ydata2: [],
                xTotal: [],
                yTotal: [],
                year: null,
                month: null,
                yearList: [],
                monthList: [
                    {
                        value: 'null',
                        label: '不选择月份'
                    },
                    {
                        value: '01',
                        label: '1月'
                    },
                    {
                        value: '02',
                        label: '2月'
                    },
                    {
                        value: '03',
                        label: '3月'
                    },
                    {
                        value: '04',
                        label: '4月'
                    },
                    {
                        value: '05',
                        label: '5月'
                    },
                    {
                        value: '06',
                        label: '6月'
                    },
                    {
                        value: '07',
                        label: '7月'
                    },
                    {
                        value: '08',
                        label: '8月'
                    },
                    {
                        value: '09',
                        label: '9月'
                    },
                    {
                        value: '10',
                        label: '10月'
                    },
                    {
                        value: '11',
                        label: '11月'
                    },
                    {
                        value: '12',
                        label: '12月'
                    }
                ],
                dataOfLegend: [],
                series: [],
                myChart: {},
                chartOption: {},
                stats: [
                    {
                        title: '年/月',
                        key: '',
                        width: 100
                    },
                    {
                        title: '运送数量',
                        key: 'total',
                        width: 100
                    },
                    {
                        title: '运送立方',
                        key: 'volume',
                        width: 100
                    }
                ]
            };
        },
        methods: {
            drawLine() {
                this.myChart = echarts.init(document.getElementById('myChart'));
                this.chartOption = {
                    title: {
                        text: '车辆运送情况',
                        left: 'center'
                    },
                    legend: {
                        data: this.dataOfLegend,
                        orient: "vertical",
                        right: 15,
                        top: '10%'
                    },
                    grid: [{
                            height: '40%'
                        },
                        {
                            top: '55%',
                            height: '40%'
                        }
                    ],
                    xAxis: [{
                            name: '日期',
                            axisLine: { onZero: true },
                            boundaryGap: false,
                            data: this.xdata,
                            axisLabel: {
                                textStyle: {
                                    color: function(value, index) {
                                        days = this.getDayInMonth(this.year, this.month);
                                        return index >= days ? 'white' : '#333';
                                    }.bind(this)
                                }
                            }
                        },
                        {
                            axisLine: { onZero: true },
                            data: this.xdata,
                            gridIndex: 1,
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                textStyle: {
                                    color: function(value, index) {
                                        days = this.getDayInMonth(this.year, this.month);
                                        return index >= days ? 'white' : '#333';
                                    }.bind(this)
                                }
                            }
                        }
                    ],
                    yAxis: [{
                            name: '运送数量',
                        },
                        {
                            gridIndex: 1,
                            name: '运送立方'
                        }
                    ],
                    tooltip: {
                        trigger: 'axis'
                    },
                    color: ['#990099', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
                    series: this.series
                }
                this.myChart.setOption(this.chartOption);
            },
            getYearList() {
                var setting = {
                    method: 'get',
                    url: '/YF/public/api/getYearData'
                };
                axios.call(this, function(res) {
                    if (res.code === 0) {
                        for (i = 0; i < res.data.length; i++) {
                            this.yearList.push(res.data[i]['year']);
                        }
                        this.yearList = this.yearList.map(item => {
                            return {
                                value: item,
                                label: item
                            };
                        });
                    }
                }.bind(this), {
                    setting: setting
                });
            },
            query() {
                this.series.splice(0, this.series.length);
                this.xdata.splice(0, this.xdata.length);
                this.ydata1.splice(0, this.ydata1.length);
                this.ydata2.splice(0, this.ydata2.length);
                var setting = {
                    method: 'get',
                    url: '/YF/public/api/getMonthlyTotalData/' + this.year + '/' + this.month
                };
                if (this.year != null) {
                    if (this.month == null || this.month == '如不选择月份，则显示全年' || this.month == 'null') {
                        axios.call(this, function(res) {
                            this.total = res.data;
                            let total1 = 0,total2 = 0;
                            this.xdata = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                            for (i = 0; i < this.total.length; i++) {
                                this.ydata1.push(this.total[i]['total']);
                                this.ydata2.push(this.total[i]['volume']);
                                total1 += parseFloat(this.total[i]['total']);
                                total2 += this.total[i]['volume'];
                                this.total[i]['volume'] = (this.total[i]['volume'] == null) ?  0 : this.total[i]['volume'];
                                this.total[i]['volume'] = parseFloat(this.total[i]['volume'].toFixed(2));
                            }
                            total2 = total2.toFixed(2);
                            this.total.unshift({
                                'month': '总计',
                                'total': total1,
                                'volume': total2
                            });
                            const newSeries1 = {
                                name: this.year + '年',
                                type: 'line',
                                data: this.ydata1
                            }
                            const newSeries2 = {
                                name: this.year + '年',
                                type: 'line',
                                xAxisIndex: 1,
                                yAxisIndex: 1,
                                data: this.ydata2
                            }
                            this.dataOfLegend.push(newSeries1.name);
                            this.series.push(newSeries1);
                            this.series.push(newSeries2);
                            this.drawLine();
                            this.myChart.clear();
                            this.myChart.setOption(this.chartOption);
                            this.stats[0].title = '月';
                            this.stats[0].key = 'month';
                        }.bind(this), {
                            setting: setting
                        });
                    } else {
                        axios.call(this, function(res) {
                            if(res.code === 0){
                                this.total = res.data;
                                let total1 = 0,
                                    total2 = 0;
                                var nullDay = new Date(this.total[0].createdate).getDate();
                                for (var i = 0; i < nullDay - 1; i++) {
                                    this.ydata1.push(0);
                                    this.ydata2.push(0);
                                }
                                for (i = 0; i < this.total.length; i++) {
                                    this.ydata1.push(this.total[i]['total']);
                                    this.ydata2.push(this.total[i]['volume']);
                                    total1 += parseFloat(this.total[i]['total']);
                                    total2 += this.total[i]['volume'];
                                    this.total[i]['volume'] = (this.total[i]['volume'] == null) ?  0 : this.total[i]['volume'];
                                    this.total[i]['volume'] = parseFloat(this.total[i]['volume'].toFixed(2));
                                }
                                total2 = total2.toFixed(2);
                                this.total.unshift({
                                    'createdate': '总计',
                                    'total': total1,
                                    'volume': total2
                                });
                                for (i = 1; i <= 31; i++) {
                                    if (i < 10) {
                                        this.xdata.push('0' + i + '日')
                                    } else {
                                        this.xdata.push(i + '日')
                                    }
                                }
                                const newSeries1 = {
                                    name: this.year + '年' + this.month + '月',
                                    type: 'line',
                                    data: this.ydata1
                                }
                                const newSeries2 = {
                                    name: this.year + '年' + this.month + '月',
                                    type: 'line',
                                    xAxisIndex: 1,
                                    yAxisIndex: 1,
                                    data: this.ydata2
                                }
                                this.dataOfLegend.push(newSeries1.name);
                                this.series.push(newSeries1);
                                this.series.push(newSeries2);
                                this.drawLine();
                                this.myChart.clear();
                                this.myChart.setOption(this.chartOption);
                                this.stats[0].title = '日';
                                this.stats[0].key = 'createdate';
                            }else{
                                this.$Message.error('暂无数据');
                            }
                        }.bind(this), {
                            setting: setting
                        });
                    }
                } else {
                    this.$Message.error('请先选择年份');
                }
            },
            addChart () {
                this.xdata.splice(0, this.xdata.length);
                var setting = {
                    method: 'get',
                    url: '/YF/public/api/getMonthlyTotalData/' + this.year + '/' + this.month
                };
                if (this.year != null) {
                    const y1 = [],
                        y2 = []
                    if (this.month == null || this.month == '如不选择月份，则显示全年' || this.month == 'null') {
                        axios.call(this, function(res) {
                            this.total = res.data;
                            let total1 = 0,
                                total2 = 0;
                            this.xdata = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

                            for (i = 0; i < this.total.length; i++) {
                                y1.push(this.total[i]['total']);
                                y2.push(this.total[i]['volume']);
                                total1 += parseFloat(this.total[i]['total']);
                                total2 += this.total[i]['volume'];
                                this.total[i]['volume'] = (this.total[i]['volume'] == null) ?  0 : this.total[i]['volume'];
                                this.total[i]['volume'] = parseFloat(this.total[i]['volume'].toFixed(2));
                            }
                            total2 = total2.toFixed(2);
                            this.total.unshift({
                                'month': '总计',
                                'total': total1,
                                'volume': total2
                            });
                            const newSeries1 = {
                                name: this.year + '年',
                                type: 'line',
                                data: y1
                            }
                            const newSeries2 = {
                                name: this.year + '年',
                                type: 'line',
                                xAxisIndex: 1,
                                yAxisIndex: 1,
                                data: y2
                            }
                            this.dataOfLegend.push(newSeries1.name);
                            this.series.push(newSeries1);
                            this.series.push(newSeries2);
                            this.drawLine();
                            this.myChart.setOption(this.chartOption);
                            this.stats[0].title = '月';
                            this.stats[0].key = 'month';
                        }.bind(this), {
                            setting: setting
                        });
                    } else {
                        axios.call(this, function(res) {
                            if(res.code === 0)
                            {
                                this.total = res.data;
                                let total1 = 0,
                                    total2 = 0;
                                var nullDay = new Date(this.total[0].createdate).getDate();
                                for (var i = 0; i < nullDay - 1; i++) {
                                    y1.push(0);
                                    y2.push(0);
                                }
                                for (i = 0; i < this.total.length; i++) {
                                    y1.push(this.total[i]['total']);
                                    y2.push(this.total[i]['volume']);
                                    total1 += parseFloat(this.total[i]['total']);
                                    total2 += this.total[i]['volume'];
                                    this.total[i]['volume'] = (this.total[i]['volume'] == null) ?  0 : this.total[i]['volume'];
                                    this.total[i]['volume'] = parseFloat(this.total[i]['volume'].toFixed(2));
                                }
                                total2 = total2.toFixed(2);
                                this.total.unshift({
                                    'createdate': '总计',
                                    'total': total1,
                                    'volume': total2
                                });
                                for (i = 1; i <= 31; i++) {
                                    if (i < 10) {
                                        this.xdata.push('0' + i + '日')
                                    } else {
                                        this.xdata.push(i + '日')
                                    }
                                }
                                const newSeries1 = {
                                    name: this.year + '年' + this.month + '月',
                                    type: 'line',
                                    data: y1
                                }
                                const newSeries2 = {
                                    name: this.year + '年' + this.month + '月',
                                    type: 'line',
                                    xAxisIndex: 1,
                                    yAxisIndex: 1,
                                    data: y2
                                }
                                this.dataOfLegend.push(newSeries1.name);
                                this.series.push(newSeries1);
                                this.series.push(newSeries2);
                                this.drawLine();
                                this.myChart.setOption(this.chartOption);
                                this.stats[0].title = '日';
                                this.stats[0].key = 'createdate';
                            }
                            else{
                                this.$Message.error('暂无数据');
                            }
                        }.bind(this), {
                            setting: setting
                        });
                    }
                } else {
                    this.$Message.error('请先选择年份');
                }
            },
            clearChart () {
                this.dataOfLegend.splice(0, this.dataOfLegend.length);
                this.series.splice(0, this.series.length);
                this.myChart.setOption(this.chartOption, true);
            },
            getDayInMonth(year, month) {
                month = parseInt(month, 10) + 1;
                var temp = new Date(year + "/" + month + "/0");
                return temp.getDate();
            },
            initChart () {
                let today = new Date();
                this.year = today.getFullYear();
                this.month = ("0" + (today.getMonth() + 1)).slice(-2);
                var setting = {
                    method: 'get',
                    url: '/YF/public/api/getMonthlyTotalData/' + this.year + '/' + this.month
                };
                axios.call(this, function(res) {
                    if(res.code === 0)
                    {
                        this.total = res.data;
                        let total1 = 0,
                            total2 = 0;
                        var nullDay = new Date(this.total[0].createdate).getDate();
                        for (var i = 0; i < nullDay - 1; i++) {
                            this.ydata1.push(0);
                            this.ydata2.push(0);
                        }
                        for (i = 0; i < this.total.length; i++) {
                            this.ydata1.push(this.total[i]['total']);
                            this.ydata2.push(this.total[i]['volume']);
                            total1 += parseFloat(this.total[i]['total']);
                            total2 += this.total[i]['volume'];
                            this.total[i]['volume'] = (this.total[i]['volume'] == null) ?  0 : this.total[i]['volume'];
                            this.total[i]['volume'] = parseFloat(this.total[i]['volume'].toFixed(2));
                        }
                        total2 = total2.toFixed(2);
                        this.total.unshift({
                            'createdate': '总计',
                            'total': total1,
                            'volume': total2
                        });
                        for (i = 1; i <= 31; i++) {
                            if (i < 10) {
                                this.xdata.push('0' + i + '日')
                            } else {
                                this.xdata.push(i + '日')
                            }
                        }
                        const newSeries1 = {
                            name: this.year + '年' + this.month + '月',
                            type: 'line',
                            data: this.ydata1
                        }
                        const newSeries2 = {
                            name: this.year + '年' + this.month + '月',
                            type: 'line',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: this.ydata2
                        }
                        this.dataOfLegend.push(newSeries1.name);
                        this.series.push(newSeries1);
                        this.series.push(newSeries2);
                        this.drawLine();
                        this.myChart.setOption(this.chartOption);
                        this.stats[0].title = '日';
                        this.stats[0].key = 'createdate';
                    }else{
                        this.$Message.error("本月暂无数据");
                    }
                }.bind(this), {
                    setting: setting
                });
            }
        },
        mounted() {
            this.getYearList();
            this.initChart();
        }
    });
});